<template>
	<view>
		<view class="top">
			<view  class="title"><b><text>李李李提交的财务申请</text></b></view>
		    <view class="approvalResults"><text>审批通过</text></view>
		</view>
		<view class="content">
			<view class="approvalNo">
				<text>审批编号</text>
			</view>
			<view  class="number">
				<b><text>123456789</text></b>
			</view>
			<view  class="department">
				<text>所在部门</text>
			</view>
			<view  class="number">
				<b><text>后勤部</text></b>
			</view>
			<view  class="department">
				<text>审批详情</text>
			</view>
			<view  class="number">
				<b><text>此处为内容内容,此处为内容内容,此处为内容内容,此处为内容内容,此处为内容内容,此处为内容内容,此处为内容内容</text></b>
			</view>
		</view>
		<view class="flowPath">
			<view  class="flowPathtitel">
				<b><text>流程</text></b>
			</view>
		    <view class="box-top"  v-for="(item,index) in dataArray" :key="index">
		    	
		    	<view class="line" :class="{active:item.active,none:index==(dataArray.length-1)}"><!-- 中线 -->
		    		<view class="dot" :class="{active:item.active}"></view> <!-- 圆点 -->
		    	</view>
		    	
		    	<view class="right-box-top"> <!-- 右边 -->
		    		<view><b>{{item.title}}</b><text class="left-box-top">{{item.time}}</text> <!-- 左边 --></view>
		    		<view class="position">{{item.content}}</view>
					
		    	</view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
	            dataArray:[
	                    {
	                        time:'2020-11-25 17:32:15',
	                        title:'标题',
	                        content:'我',
	                        active:true
	                    },{
	                        time:'2020-11-25 17:32:15',
	                        title:'标题',
	                        content:'',
	                        active:true
	                    },{
	                        time:'2020-11-25 17:32:15',
	                        title:'标题',
	                        content:'',
	                        active:false
	                    },{
						    time:'2020-11-25 17:32:15',
						    title:'标题',
						    content:'',
						    active:false
						}
	                ]
	        }
	    },
	    onLoad() {
	
	    },
	    methods: {
	
	    }
	}
</script>

<style lang="scss">
	.top{
		width: 100%;
		height: 160rpx;
		background-color: #FFFFFF;
		padding-left:40rpx ;
	}
	.title{
		padding-top: 20rpx;
	}
	.approvalResults{
		margin-top: 20rpx;
	}
	.content{
		margin: 20rpx auto;
		width: 90%;
		height: 620rpx;
		border-radius: 10px;
		background-color: #FFFFFF;
		padding-left: 20rpx;
		.approvalNo{
			width: 100%;
			height: 40rpx;
			padding-top: 20rpx;
		} ;
		.number{
			width: 100%;
			height: 40rpx;
			margin-top: 20rpx;
		}
		.department{
			width: 100%;
			height: 40rpx;
			margin-top: 20rpx;
		}
	}
	.flowPath{
		margin: 20rpx auto 50rpx auto;
		width: 90%;
		height: 620rpx;
		border-radius: 10px;
		background-color: #FFFFFF;
		padding-left: 20rpx;
		.flowPathtitel{
			width: 100%;
			height: 40rpx;
			padding: 20rpx 0;
		}
	}
	
	///=================
	.box-top{
		width: 100%;
		min-height: 120rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		.line{
			width: 4rpx;	
			background-color: rgba(228,231,237,1);
			margin: 0 20rpx 0 20rpx;
			.dot{
				width: 20rpx;
				height: 20rpx;
				background-color: rgba(228,231,237,1);
				border-radius: 50%;
				position: relative;
				left: -9rpx;
			}
		}
		.right-box-top{
			flex: 1;
			padding: 0 0 20rpx 0;
			margin-top: -10rpx;
		}
	}
	.position{
		color: rgba(198,198,198,1);
		font-size: 25rpx;
	}
	.left-box-top{
		position: relative;
		left: 290rpx;
		width: 280rpx;
		color: rgba(198,198,198,1);
		font-size: 20rpx;
	}
	//激活元素
	.active{
		background-color: rgba(44,143,233,1) !important;
	}
	// 隐藏元素
	.none{
		background-color: rgba(0,0,0,0) !important;
	}
</style>
